import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Modal } from "antd-mobile"
import Header from './HeaderNew';
import Footer from './Footer.jsx';
import { connect } from "dva"
import { isNull } from '../utils/helper';
@connect(({ global }) => {
	return ({
		modalPath: global.modalPath
	})
})
export default class Main extends PureComponent {
	static childContextTypes = {
		location: PropTypes.object,
		breadcrumbNameMap: PropTypes.object,
		events: PropTypes.object
	}
	getChildContext() {
		return {
			events: {}
		};
	}
	constructor(props) {
		super(props);
		this.timer = null;
		this.state = {
		}
	}
	componentDidMount() {

	}
	listenLocal = () => {
		let closeModal = localStorage[MI_APP_CODE+"closeModal"];
		if (closeModal === "true") {
			let { modalPath, dispatch } = this.props;
			let item = modalPath[modalPath.length - 1];
			this.setState({
				["visible" + item._key]: false
			})
			setTimeout(() => {
				dispatch({
					type: "global/closeModal",
					payload: {
						_key: item._key
					}
				})
				this.setState({
					["visible" + item._key]: undefined
				})
				localStorage[MI_APP_CODE+"closeModal"] = ""
			}, 500)
		}
		else {

		}
	}
	render() {
		let { dispatch, children, location, routerArr, modalPath } = this.props;
		let prevPath = location.pathname + location.search;
		if (prevPath !== "/" && prevPath !== "/login") {
			localStorage[MI_APP_CODE+"prevPath"] = prevPath;
		}
		//location:{pathname:"/page",search:"?_fc=xxxxx&xxx"}
		let modalPage = [];
		if (modalPath && modalPath.length > 0) {
			console.log("有modal");
			clearInterval(this.timer)
			// this.timer=setInterval(()=>{
			// 	this.listenLocal()
			// },300)
			modalPath.map((item, key) => {
				let { pathname, search, _key } = item;
				let Com = routerArr[pathname], newLocation = { ...location, state: undefined, ...item }
				let visible = this.state["visible" + _key];
				if (visible === undefined) {
					visible = true
				}
				let closeModal = () => {
					this.setState({
						["visible" + _key]: false
					})
					setTimeout(() => {
						dispatch({
							type: "global/closeModal",
							payload: {
								_key
							}
						})
						this.setState({
							["visible" + _key]: undefined
						})
					}, 500)
				}
				modalPage.push(<Modal
					key={key}
					animationType="slide-up"
					visible={visible}
					popup
					closable
					onClose={closeModal}
					style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0, zIndex: 9999999 }}
					className="modal-router"
				>
					{/*<Header location={newLocation} isModal={true} closeModal={closeModal}/>*/}
					<Com {...this.props} location={newLocation} isModal={true} />
				</Modal>)
			})
		}
		else {
			console.log("没modal");
			clearInterval(this.timer)
		}
		let headerClass = "";
		if (browser.isInApp) {
			headerClass += " no-header";
		}
		// 透明背景的样式
		let transparentStyle = {};
		let isTransparent = false;
		let transparentImg;
		try {
			isTransparent = mi_is_transparent;
			transparentImg = mi_transparent_img;
		}
		catch (e) {

		}
		if (isTransparent) {
			if (!isNull(transparentImg)) {
				transparentStyle = {
					background: "url(" + transparentImg + ") center no-repeat",
					backgroundSize: "cover"
				}
			}
		}
		return (
			<div id="main" className={headerClass} style={{ ...transparentStyle }}>
				<Header location={location} />
				{modalPage}
				{children}
				<Footer location={location} />
			</div>
		);
	}
}
Main.propTypes = {
	children: PropTypes.element.isRequired
};
